<template>
  <div :id="pid" :style="barChartsSize"></div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'

export default {
  name: 'SearchChart',
  props: {
    pid: {
      tyep: String,
      default: 'percentCharts1'
    },
    width: {
      type: String,
      default: '105'
    },
    height: {
      type: String,
      default: '105'
    }
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    setTimeout(() => {
      this.initChart()
    }, 0)
    // setInterval(() => {
    //   this.percentNum++
    // }, 1000)
  },
  watch: {
    percentNum (newValue, oldValue) {
      if (this.chart) {
        if (newValue) {
          this.$nextTick(() => {
            console.log('bb')
            this.initChart()
          })
        } else {
          this.$nextTick(() => {
            console.log('bb')
            this.initChart()
          })
        }
      } else {
        this.$nextTick(() => {
          console.log('bb')
          this.initChart()
        })
      }
    }
  },
  beforeDestroy () {
    console.log('销毁')
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  computed: {
    ...mapState('m_searchDetail', ['percentNum']),
    barChartsSize () {
      return `width: ${this.width}px; height: ${this.height}px`
    }
  },
  methods: {
    initChart () {
      const option = {
        color: ['#56abe8', '#dee3e9'],
        series: [
          {
            name: '完成率',
            type: 'pie',
            radius: ['65%', '87%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: '{percentNum|{c}%}' + '{text|\n超限率}',
              rich: {
                percentNum: {
                  color: '#3D414B',
                  fontSize: '16',
                  fontWeight: 700
                },
                text: {
                  fontSize: 12,
                  color: '#BFBFBF',
                  padding: [3, 0, 0, 0]
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                name: 'b',
                value: '100',
                itemStyle: {
                  color: '#f2f2f2'
                }
              },
              {
                name: 'a',
                value: this.percentNum,
                label: {
                  show: true
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#F7B500'
                    },
                    {
                      offset: 0.5,
                      color: '#FA6400'
                    },
                    {
                      offset: 1,
                      color: '#E02020'
                    }
                  ])
                }
              }
            ]
          }
        ]
      }
      this.chart = echarts.init(document.getElementById(this.pid))
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped></style>
